﻿<!DOCTYPE html>
<!-- 
	/**
	  * fluid - portable application framework
	  * Copyright (c) 2012-2013, Vikas Burman, all rights reserved.
	  * 
	  * Licensed under the terms of the MIT license. You are free to use 'fluid' under any open source or 
	  * commercial project, as long as this copyright header is left intact.
	  * 
	  * An explicit credit notice by using tiny "crafted on fluid" logo, which links back to the commercial site
	  * of the project, is desired though not bounded by licensing terms.
	  * 
	  *     Project: http://fluidjs.codeplex.com/
	  *     License: http://fluidjs.codeplex.com/license
	  *        Blog: http://fluidjs.vikasburman.com
	  * 
	  */
-->
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>fluid - portable application framework</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta name="description" content="fluid - portable application framework | examples" />
	<meta name="language" content="en-US" />
	<meta name="domain" content="http://fluidjs.vikasburman.com" />
	<meta name="author" content="Vikas Burman" />
	<meta name="copyright" content="Copyright (c) 2012-2013, Vikas Burman, all rights reserved." />
    <script src="jquery.min.js"></script>
    <script src="bootstrap.min.js"></script>    
	<link href="bootstrap.min.css" rel="stylesheet">
    <style type="text/css">
      body {
        padding-top: 60px;
        padding-bottom: 40px;
      }
      .sidebar-nav {
        padding: 9px 0;
      }

      @media (max-width: 980px) {
        /* Enable use of floated navbar text */
        .navbar-text.pull-right {
          float: none;
          padding-left: 5px;
          padding-right: 5px;
        }
      }
    </style>
	<script type="text/javascript">
		// default onready
		$(function() {
			$("#warningHelp").popover();
		});
	</script>		
    <link href="bootstrap-responsive.min.css" rel="stylesheet">
	<link href="styles.css" rel="stylesheet">

	<link rel="shortcut icon" href="fluid.png">
  </head>

  <body>
    <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container-fluid">
          <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="brand" href="http://fluidjs.codeplex.com" target="_blank">fluid</a>
          <div class="nav-collapse collapse">
            <p class="navbar-text pull-right">
              <a href="http://fluidjs.vikasburman.com" class="navbar-link" target="_blank">More</a>
            </p>
            <ul class="nav">
              <li class="active"><a href="#">About</a></li>
              <li><a href="../index.html">Examples</a></li>
              <li><a href="http://fluidjs.codeplex.com/documentation" target="_blank">Documentation</a></li>
            </ul>
          </div><!--/.nav-collapse -->
        </div>
      </div>
    </div>

    <div class="container-fluid">
      <div class="row-fluid">
		<div id="header">
			<img src="fluid-big.png">	
			<h2><i>fluid</i>, an all-JavaScript application framework that helps crafting 100% client-side, 
			platform and browser independent, HTML 5 based applications.</h2> 
			<br /><br />
			<div id="text">
			fluid is written in plain JavaScript leveraging several HTML 5 capabilities. Unlike other JavaScript 
			frameworks which are mostly plug & play in context of a web page, the philosophy of fluid is 
			entirely different. It is an application development framework that provides environment and 
			infrastructure for writing 100% client-side JavaScript based applications. In sharp contrast to other 
			frameworks where JavaScript is linked to a web page, fluid does it the other way round. Here markup, 
			style sheets, etc. can be linked to a JavaScript page component.
			<br /><br />
			Having built over HTML 5, CSS and JavaScript, a fluid application has inherent support for cross-platform 
			(Mac OS, Windows, Linux, Android, iOS, etc.) and cross-browser (IE, Firefox, Chrome, Safari, etc.) 
			execution. 
			<br /><br />
			With intelligently written core of the framework, multiple deployment options are transparently possible
			without any conditional codebase. In addition to regular server based deployment, fluid offers a very 
			lucrative portable deployment approach, which allows carrying application and database files on a 
			portable media (e.g., USB drive). Such applications can be executed anywhere a web browser exists - 
			Desktop PC, MacBook, Tablet, PDA, and alike. No installation is required whatsoever.
			<br /><br />
			As they say, a picture is worth 1000 words, so is the case with code. A code sample is worth a 
			1000 sentences of documentation, when it comes to understand a framework or library. Keeping that 
			in mind, a lot of examples are developed and grouped here in three major categories:
			<br /><br />
			<ul>
				<li><strong>Basic</strong> - These let you get started with core concepts 
				of the framework.</li>
				<br />
				<li><strong>Conceptual</strong> - When you are done exploring the
				basics, its time to explore key features and concepts of the framework.</li>
				<br />
				<li><strong>Read-World</strong> - Having understood the key capabilities 
				and components of the framework, explore how a combination of these are applied in real-world 
				application scenarios.</li>
			</ul>
			<br />
			Each example showcases a particular feature, concept or capability of the framework. Files for an 
			example are placed in an independent folder under "examples" folder and are self-sufficient except for
			framework and applet reference (which are kept at root folder to avoid keeping multiple copies).
			<br /><br />
			Exploring examples in specified order, will help in better understanding of concepts.
			<br /><br /><br />
			<i>
			<strong><u>Before you start, know:</u></strong><br /><br />
			<ul>
			<li><strong>What you need?</strong> All examples, requires a web browser and Java plugin (JRE), installed and enabled.
			It would be used by "fsa.jar" applet (included) which must be given permission to run. 
			For some examples, you will need a web server where you can host the 
			example code and see it running for an online simulation (at http://localhost).</li><br /><br />	
			<li><strong><a id="warningHelp" data-trigger="hover" data-placement="right" data-html="true" data-toggle="popover" data-title="Java Applet Warning" data-content="<img src='warning.png' />" href="warning.png">Security warning</a>:</strong>Java plugin, will make use of an applet
			(named "fsa") to access local file system. Which may show a security warning, asking for your permission to run the java applet. You should 
			trust this applet. This applet is used to read/write local files in portable execution mode. This 
			feature can optionally be turned off completely - should this be a cause of concern for your application 
			type and you don't want to use the portable mode of execution for your application. At the moment, when
			you are exploring these examples, you should allow running the applet - or else you would not be able 
			to run many of these.</li><br /><br />	
			<li><strong>Browsers:</strong> Examples are tested on latest versions of major browsers, e.g., Microsoft 
			Internet Explorer, Google Chrome, Mozilla FireFox, and Apple Safari on Windows 7, Windows 8 and 
			Mac OS X machines.</li><br /><br />
			<li><strong>Debug vs. Release build:</strong> Unless specifically required, a debug (non-minified) 
			build of the framework is used by each example.</li><br /><br />
			<li><strong>Framework file size:</strong> Framework code files are throughly commented and use 
			verbose names for utmost clarity. From a javascript file standpoint, its file-size could be a 
			cause of concern at first. However it really strips well when minified, so should not be worried 
			about. Further, the build engine (included with framework) is highly flexible to let you include 
			only required features and components and thereby gives you finer control on your copy of the 
			framework. Note, this file includes all dependencies as well (e.g., jQuery, etc.).</li>
			</ul>
			</i>
			</div>
			<br /><h1 align="center"><a href="../index.html">GO PLAY</a></h1>
		</div>
	</div><!--/row-->

      <hr>

      <footer>
        <p align="center">Copyright &copy; 2012-2013, Vikas Burman, all rights reserved.</p>
      </footer>

    </div><!--/.fluid-container-->
  </body>
</html>
